<template>
	<view class="u-p-20">
		<view class="w-box u-p-20">
			<view class="" style="color: red;">
				{{form.shippingType | shippingType}}
			</view>
			<view class="u-m-t-10">
				王志强 <text class="u-font-20 u-m-l-40">13050022537</text>
			</view>
			<view class="u-m-t-10">
				<template v-if="form.shippingType==0">
					<!-- <view>请付款2小时后，到XX街XX号XXX自提点取货</view> -->
				</template>
				<template v-else>
					<view>{{form.consigneeAddress}}</view>
				</template>
			</view>
		</view>
		<view class="w-box u-p-20 u-m-t-20">
			<view class="u-flex u-row-between">
				<text class="u-flex-1">
					订单号：{{form.orderSn}}
				</text>
				<u-button size="mini" @click='copy(form.orderSn)'>复制</u-button>
			</view>
			<view v-for="(item,index) in form.items" :key="index">
				<view class="u-flex u-m-t-10" @click="$u.route('/pages/shop/detail/detail?id='+item.goods.id)">
					<u-image width="150rpx" height="150rpx" :show-loading='false' :src="getUrl(item.goods.pic)"></u-image>
					<view class="u-m-l-20 u-flex-1">
						<view class="">
							{{item.title}}
						</view>
						<view class="u-font-22 u-m-t-10 u-m-b-10">
							{{item.goods.remarks}}
						</view>
						<view class="u-flex u-row-between u-flex-1">
							<text>￥{{item.price|getPrice}}</text>
							<text>x{{item.count}}</text>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-right">
					<u-button size="mini" class='u-m-r-10' v-if='form.status!=1 && item.refundStatus==0' @click.stop="refund(item.id,form.orderSn)">立即退款</u-button>
					<u-button size="mini" class='u-m-r-10' disabled v-if='form.status!=1 && item.refundStatus!=0'>{{item.refundStatus | refundStatus}}</u-button>
				</view>
			</view>
			<view class="u-m-t-10 u-flex u-row-between">
				<text>共{{totalNum(form.items)}}件商品</text>
				<text class="u-font-34">合计：￥{{form.totalPrice|getPrice}}</text>
			</view>
			<view class="u-m-t-10 u-flex u-row-between" v-if="form.score">
				<text>使用{{form.score}}积分抵扣{{(form.proportion*form.score) | getPrice}}元</text>
				<text>实付:
					<text class="total-price">
						￥{{ (form.totalPrice-form.proportion*form.score) | getPrice }}
					</text>
				</text>
			</view>
			<view class="u-flex u-row-right u-m-t-10">
				<text class="u-flex-1"></text>
				<u-button size="mini" class='u-m-r-10' @click="call('0411-8355456')">联系客服</u-button>
				<u-button size="mini" v-if='form.status==1' type="primary" @click="$u.route('/pages/shop/pay/pay',{totalPrice:(form.totalPrice-form.proportion*form.score),orderSn:form.orderSn})">立即付款</u-button>
			</view>
		</view>
		<view class="w-box u-m-t-20">
			<view class="u-p-40 u-border-bottom u-flex u-row-between">
				<text>订单编号</text>
				<text class="u-tips-color">{{form.orderSn}}</text>
			</view>
			<view class="u-p-40 u-flex u-row-between">
				<text>创建时间</text>
				<text class="u-tips-color">{{form.createDate}}</text>
			</view>
			<view class="u-p-40 u-border-bottom u-flex u-row-between" v-if="form.payTypeName">
				<text>支付方式</text>
				<text class="u-tips-color">{{form.payTypeName}}</text>
			</view>
			<view class="u-p-40 u-flex u-row-between" v-if="form.payTime">
				<text>支付时间</text>
				<text class="u-tips-color">{{form.payTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {orderGetOrders,refund} from '@/api/shop.js'
	import {
		$shopImgUrl
	} from '@/service/request.js'
	export default {
		filters: {
			refundStatus: function(value) {
				let val
				switch (value){
					case 1:
					val = '已申请'
						break;
					case 2:
					val = '退款中'
						break;
					case 3:
					val = '退款成功'
						break;
					case 4:
					val = '未同意'
						break;
				}
				return val;
			}
		},
		computed:{
			getUrl(){
				return function(pic){
					return $shopImgUrl+pic
				}
			}
		},
		data() {
			return {
				form:{}
			}
		},
		onLoad(e) {
			this.orderGetOrders(e.orderSn)
		},
		methods: {
			refund(id,orderSn){
				refund({
					JSESSIONID: uni.getStorageSync('sessionid'),
					id
				}).then(res=>{
					this.$u.toast('退款申请已提交！')
					this.orderGetOrders(orderSn)
				})
			},
			orderGetOrders(orderSn){
				orderGetOrders({
					JSESSIONID: uni.getStorageSync('sessionid'),
					orderSn
				}).then(res=>{
					this.form = res
				})
			},
			call(tel){
				// #ifndef APP-PLUS
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
				// #endif
				
				// #ifdef APP-PLUS
				plus.device.dial(tel, true);
				// #endif
			},
			copy(data){
				uni.setClipboardData({
				    data: data,
				    success: function () {
				        console.log('success');
				    }
				});
			},
			// 总件数
			totalNum(item) {
				if(item){
					let num = 0;
					item.map(val => {
						num += val.count;
					});
					return num;
				}
			},
		}
	}
</script>

<style>
page{
	background-color: #f8f8f8;
}
</style>
<style scoped>
	.w-box{
		background-color: #FFFFFF;
		border-radius: 14rpx;
	}
</style>
